import { AlipayOutlined, CheckOutlined, CoffeeOutlined, CreditCardOutlined, DeleteOutlined, DollarCircleOutlined, EditOutlined, StepForwardOutlined, WechatOutlined } from '@ant-design/icons';
import { Button, Input, InputNumber, message, Popconfirm, Select } from 'antd';
import moment, { Moment } from 'moment';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import useTrigger from '../../../hooks/useTrigger';
import { BudgetItem } from '../../../interface/budgetData';
import { DataRowResult } from '../../../interface/response';
import { DarkModeSelector } from '../../../redux/Global/selector';
import { ActionProps } from '../../../redux/type';
import { DeleteBudgetItem, ReqtHeader } from '../../../RequestURL';

export const RecordTypeExpenses = new Map<string, { icon: React.ReactNode, type: string; }[]>([
    ['食物酒水', [
        { icon: <CoffeeOutlined />, type: "早午晚餐" },
        { icon: <CoffeeOutlined />, type: "烟酒茶饮" },
        { icon: <CoffeeOutlined />, type: "水果零食" },
    ]],
    ['衣服饰品', [
        { icon: <StepForwardOutlined />, type: "衣服裤子" },
        { icon: <StepForwardOutlined />, type: "鞋帽包包" },
        { icon: <StepForwardOutlined />, type: "化妆饰品" },
    ]],
    ['居家物业', [
        { icon: <StepForwardOutlined />, type: "日常用品" },
        { icon: <StepForwardOutlined />, type: "水电煤气" },
        { icon: <StepForwardOutlined />, type: "房租" },
        { icon: <StepForwardOutlined />, type: "物业管理" },
        { icon: <StepForwardOutlined />, type: "维修保养" },
    ]],
    ['行车交通', [
        { icon: <StepForwardOutlined />, type: "公共交通" },
        { icon: <StepForwardOutlined />, type: "打车出租" },
        { icon: <StepForwardOutlined />, type: "私家车费" },
    ]],
    ['交流通讯', [
        { icon: <CoffeeOutlined />, type: "座机费" },
        { icon: <CoffeeOutlined />, type: "手机费" },
        { icon: <CoffeeOutlined />, type: "上网费" },
        { icon: <CoffeeOutlined />, type: "邮寄费" },
    ]],
    ['休闲娱乐', [
        { icon: <StepForwardOutlined />, type: "运动健身" },
        { icon: <StepForwardOutlined />, type: "腐败聚会" },
        { icon: <StepForwardOutlined />, type: "休闲玩乐" },
        { icon: <StepForwardOutlined />, type: "宠物宝贝" },
        { icon: <StepForwardOutlined />, type: "度假旅游" },
    ]],
    ['学习进修', [
        { icon: <StepForwardOutlined />, type: "书报杂志" },
        { icon: <StepForwardOutlined />, type: "培训进修" },
        { icon: <StepForwardOutlined />, type: "数码装备" },
    ]],
    ['人情往来', [
        { icon: <StepForwardOutlined />, type: "送礼请客" },
        { icon: <StepForwardOutlined />, type: "孝敬家长" },
        { icon: <StepForwardOutlined />, type: "还人钱物" },
        { icon: <StepForwardOutlined />, type: "慈善捐款" },
    ]],
    ['医疗保健', [
        { icon: <StepForwardOutlined />, type: "药品费" },
        { icon: <StepForwardOutlined />, type: "保健费" },
        { icon: <StepForwardOutlined />, type: "美容费" },
        { icon: <StepForwardOutlined />, type: "治疗费" },
    ]],
    ['金融保险', [
        { icon: <StepForwardOutlined />, type: "银行手续" },
        { icon: <StepForwardOutlined />, type: "投资亏损" },
        { icon: <StepForwardOutlined />, type: "按揭还款" },
        { icon: <StepForwardOutlined />, type: "消费税收" },
        { icon: <StepForwardOutlined />, type: "利息支出" },
        { icon: <StepForwardOutlined />, type: "赔偿罚款" },
    ]],
    ['其他支出', [
        { icon: <StepForwardOutlined />, type: "其他支出" },
        { icon: <StepForwardOutlined />, type: "意外丢失" },
        { icon: <StepForwardOutlined />, type: "烂账损失" },
    ]],
]);

export const RecordTypeIncome = new Map<string, { icon: React.ReactNode, type: string; }[]>([
    ['职业收入', [
        { icon: <AlipayOutlined />, type: '工资收入' },
        { icon: <AlipayOutlined />, type: '利息收入' },
        { icon: <AlipayOutlined />, type: '加班收入' },
        { icon: <AlipayOutlined />, type: '奖金收入' },
        { icon: <AlipayOutlined />, type: '投资收入' },
        { icon: <AlipayOutlined />, type: '兼职收入' },
    ]],
    ['其他收入', [
        { icon: <AlipayOutlined />, type: '礼金收入' },
        { icon: <AlipayOutlined />, type: '中奖收入' },
        { icon: <AlipayOutlined />, type: '意外来钱' },
        { icon: <AlipayOutlined />, type: '经营所得' },
    ]],
]);

const GetWeekDay = (day: number): string =>
{
    day = Number(day);
    switch (day)
    {
        case 1: return "周一";
        case 2: return "周二";
        case 3: return "周三";
        case 4: return "周四";
        case 5: return "周五";
        case 6: return "周六";
        case 7: return "周日";
        default: return "未知";
    }

};
export default function RecordItem(props: { item: BudgetItem; isShowDate: boolean; })
{
    const dispatch = useDispatch();

    const isDarkMode = useSelector(DarkModeSelector);

    const [isEdit, setIsEdit] = useTrigger(false);

    return (
        <div className='RecordItem'>
            <div className='RecordDate'>
                {
                    props.isShowDate &&
                    <>
                        <span style={{ color: isDarkMode ? '#ffffff' : '#8c8c8c' }}>
                            {moment(props.item.budget_date).format('DD')}
                        </span>
                        <span style={{ color: isDarkMode ? '#ffffff' : '#8c8c8c' }}>
                            {GetWeekDay(moment(props.item.budget_date).day())}
                        </span>
                    </>
                }
            </div>
            <div className='RecordType'>
                <Button size='large' icon={<CoffeeOutlined />} type='text' />
            </div>
            <div className='RecordDescription' style={{ gap: isEdit ? '2px' : '' }}>
                <div className='RecordTypeTxt'>
                    {
                        isEdit
                            ? <Select style={{ width: "200px" }} defaultValue={props.item.budget_category} showSearch onChange={e =>
                            {
                                console.log(e);
                            }}>
                                {
                                    [...(props.item.budget_type === 'EXPENSES' ? RecordTypeExpenses.keys() : RecordTypeIncome.keys())].map((v: string) =>
                                    (
                                        <Select.OptGroup key={v} title={v}>
                                            {
                                                (props.item.budget_type === 'EXPENSES' ? RecordTypeExpenses.get(v) : RecordTypeIncome.get(v))?.map(item => (
                                                    <Select.Option key={item.type}>
                                                        {item.icon}
                                                        &nbsp;&nbsp;
                                                        {item.type}
                                                    </Select.Option>
                                                ))
                                            }
                                        </Select.OptGroup>
                                    ))
                                }
                            </Select>
                            : <span>{props.item.budget_category}</span>
                    }
                </div>
                <div className='RecordMemo'>
                    {
                        isEdit
                            ? <Input size='small' defaultValue={props.item.budget_memo} />
                            : <span  >{props.item.budget_memo}</span>
                    }
                </div>
                <div className='RecordAmountTypeAndTime'>
                    {moment(props.item.budget_date).format('HH:ss')}·
                    {
                        isEdit
                            ? <Select size='small' style={{ width: "120px" }} defaultValue={props.item.budget_way}>
                                <Select.Option value='支付宝'><AlipayOutlined />&nbsp;&nbsp;支付宝</Select.Option>
                                <Select.Option value='微信'><WechatOutlined />&nbsp;&nbsp;微信</Select.Option>
                                <Select.Option value='银行卡'><CreditCardOutlined />&nbsp;&nbsp;银行卡</Select.Option>
                                <Select.Option value='现金'><DollarCircleOutlined />&nbsp;&nbsp;现金</Select.Option>
                            </Select>
                            : <span>{props.item.budget_way}</span>
                    }
                </div>
            </div>
            <div className='RecordAmountAndOptions'>
                {
                    isEdit
                        ? <InputNumber prefix="￥" size='large' defaultValue={props.item.budget_amount} style={{ width: '120px' }} />
                        : <span style={{
                            color: props.item.budget_type === 'EXPENSES' ? '#f5222d' : '#52c41a',
                        }}
                        >&yen;{Number(props.item.budget_amount).toFixed(2)}
                        </span>
                }

                <div>
                    <Button children={isEdit ? '确认' : '修改'} type='link' size='small'
                        style={{ color: isEdit ? '#52c41a' : '#1890ff', transition: "none" }}
                        icon={isEdit ? <CheckOutlined /> : <EditOutlined />}
                        onClick={() =>
                        {
                            setIsEdit(!isEdit);
                        }} />
                    {
                        isEdit
                            ? null
                            :
                            <Popconfirm
                                title="确定要删除这条记录吗?"
                                onConfirm={async () =>
                                {
                                    const { id } = props.item;

                                    const res: DataRowResult = await (await fetch(DeleteBudgetItem, {
                                        method: "DELETE",
                                        headers: ReqtHeader.JSON,
                                        body: JSON.stringify({ id })
                                    })).json();

                                    if (res.affectedRows === 1)
                                    {
                                        message.success("删除成功");
                                    } else
                                    {
                                        message.error('出错了请稍后重试');
                                    }

                                    //Async Fetch Current Month BudgetList
                                    dispatch<ActionProps<string, Moment[]>>({
                                        type: "GetBudgetListData",
                                        payload: [
                                            moment().startOf('month'),
                                            moment().endOf('month'),
                                        ],
                                    });
                                }}
                                okText="确定"
                                cancelText="取消"
                            >
                                <Button children='删除' danger type='link' size='small' icon={<DeleteOutlined />} />
                            </Popconfirm>
                    }
                </div>
            </div>
        </div >
    );
}
